<template>
  <div class="mailCategorySet">
    <div class="title">
      <breadCrumb @back="returnFun" :titleArr="titleArr"></breadCrumb>
    </div>
    <div class="content">
      <div class="mail_category_box clearBoth">
        <div class="mail_category_all">
          <span v-for="(category, index) in mailCategory" class="enabled" :class="[index === categoryIndex ? 'active' : '', category.disable ? 'color_red' : '']" @click="editCategory(category, index)" :title="category.name">{{category.name}}</span>
        </div>
        <el-button class="right primary_btn" @click="addcategory">{{$t('config.channel.addCategoy')}}</el-button>
      </div>
      <div class="mail_category_add" v-show="categoryShow" v-loading="editLoading">
        <el-form ref="mailCategoryAdd" :model="mailCategoryAdd" :rules="rules" label-width="80px" label-position="left">
          <el-form-item prop="categoryName" :label="$t('config.channel.categoryName') + ':'" class="category_add_li category_form_li">
            <el-input v-model.trim="mailCategoryAdd.categoryName" class="category_li_input" :placeholder="$t('config.channel.categoryName')"></el-input>
          </el-form-item>
          <el-form-item prop="rulesType" class="category_add_li category_form_li" :label="$t('config.channel.condition') + ': '">
            <el-select size="mini" v-model="mailCategoryAdd.rulesType" class="category_li_input">
              <el-option :label="$t('config.channel.any')" value="any"></el-option>
              <el-option :label="$t('config.channel.all')" value="all"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="conditions_box category_form_li" v-for="(condition, index) in mailCategoryAdd.list" required>
            <el-row>
              <el-col :span="7" class="condition_li">
                <el-select size="mini" class="condition_li_item" v-model="condition.name" >
                  <el-option :label="$t('config.channel.senderAddress')" value="sendAddr"></el-option>
                  <el-option :label="$t('config.channel.subject')" value="subject"></el-option>
                </el-select>
              </el-col>
              <el-col :span="7" class="condition_li">
                <el-select size="mini" class="condition_li_item" v-model="condition.type" >
                  <el-option :label="$t('config.channel.include')" value="in"></el-option>
                  <el-option :label="$t('config.channel.notInclude')" value="nin"></el-option>
                  <el-option :label="$t('config.channel.equal')" value="eq"></el-option>
                  <el-option :label="$t('config.channel.notEqual')" value="ne"></el-option>
                </el-select>
              </el-col>
              <el-col :span="7" class="condition_li">
                <el-form-item class="conditions_li_text condition_li_item" :prop="'list.' + index + '.content'" :rules="{required: true, message: $t('configLazyLoad.channel.mailTip18'), trigger: 'blur'}">
                  <el-input v-model.trim="condition.content"  :placeholder="$t('config.channel.conditionText')"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <span v-if="index === 0" @click="addDomain(condition)" class="el-icon-plus domain_btn"></span>
                <span v-else @click="removeDomain(condition)" class="el-icon-minus domain_btn"></span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <div class="btn_box clearBoth">
              <el-button @click="saveForm('mailCategoryAdd')" type="primary" class="primary_btn">{{$t('public.save')}}</el-button>
              <el-button v-if="categoryTodo === 'update'" @click="updateCategory('mailCategoryAdd')" :type="categoryIndex === -1 ? 'danger' : mailCategory[categoryIndex].disable ? 'primary' : 'danger'" class="primary_btn">{{categoryIndex === -1 ? $t('config.channel.disabled') : mailCategory[categoryIndex].disable ? $t('config.channel.enabled') : $t('config.channel.disabled')}}</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import breadCrumb from '../../../../ui-modules/breadCrumb/BreadCrumbConfig.vue'
  import * as types from '@/store/modules/config/channelConfig/channelMail/mutation-types'
  //    获取邮箱分类
  function getMailCategory (store, data) {
    let newData = {
      relateMailId: data.id,
      page: 1,
      limit: 10,
      email: data.email,
      flag: 'kf'
    }
    return store.dispatch('showMailCategory', newData)
  }
//  编辑邮箱分类
  function editMailCategory (store, data) {
    let newData = {
      categoryId: data._id
    }
    return store.dispatch('editMailCategory', newData)
  }
  //  保存邮件分类
  function saveAndUpdateMailCategory (store, data) {
    return store.dispatch('saveAndUpdateMailCategory', data)
  }
//  更新邮件分类标签
  function switchMailCategoryEnable (store, data) {
    return store.dispatch('switchMailCategoryEnable', data)
  }
  export default{
    name: 'FirmMailCategorySet',
    data () {
      return {
        mailCategoryAdd: {
          categoryName: '',
          rulesType: 'any',
          list: [
            {
              name: 'sendAddr',
              type: 'in',
              content: ''
            }
          ]
        },
        titleArr: [this.$t('configLazyLoad.channel.mailTip8'), this.$t('configLazyLoad.channel.mailTip19')],
        categoryId: '',
        categoryTodo: 'add',
        categoryIndex: -1,
        editLoading: false,
        categoryShow: false,
        rules: {
          categoryName: [
            {required: true, message: this.$t('configLazyLoad.channel.mailTip20'), trigger: 'blur'}
          ]
        }
      }
    },
    components: {
      breadCrumb
    },
    props: {
      categoreInfo: {
        type: Object,
        default () {
          return {}
        }
      },
      categoreFlag: {
        type: Boolean,
        default: false
      }
    },
//    activated () {
//      this.refreshRightBtn()
//    },
    methods: {
      returnFun () {
        this.$emit('cancel')
      },
      updateCategory () {
        let data = this.mailCategory[this.categoryIndex]
        let disable = 'true'
        if (data.disable === 'false' || !data.disable) {
          disable = true
        } else {
          disable = false
        }
        let newData = {
          categoryId: data._id,
          disable: disable
        }
        let that = this
        switchMailCategoryEnable(that.$store, newData).then(() => {
          let commitData = {
            index: that.categoryIndex,
            disable: disable
          }
          that.$store.commit(types.UPDATE_MAIL_CATEGORY_LIST_DISABLE, commitData)
        })
      },
      refreshCategory () {
        getMailCategory(this.$store, this.categoreIofoClone)
      },
      addDomain () {
        this.mailCategoryAdd.list.push({
          name: 'sendAddr',
          type: 'in',
          content: ''
        })
      },
      addcategory () {
        this.categoryId = ''
        this.categoryTodo = 'add'
        this.categoryIndex = -1
        this.mailCategoryAdd = {
          categoryName: '',
          rulesType: 'any',
          list: [
            {
              name: 'sendAddr',
              type: 'in',
              content: ''
            }
          ]
        }
        this.categoryShow = true
      },
      editCategory (data, index) {
        this.categoryTodo = 'update'
        this.categoryIndex = index
        this.categoryId = data._id
        editMailCategory(this.$store, data).then((res) => {
          this.mailCategoryAdd = res
          this.categoryShow = true
        })
      },
      removeDomain (item) {
        var index = this.mailCategoryAdd.list.indexOf(item)
        if (index !== -1) {
          this.mailCategoryAdd.list.splice(index, 1)
        }
      },
      saveForm (formName) {
        let that = this
        that.$refs[formName].validate((valid) => {
          if (valid) {
            let newData = {
              categoryId: that.categoryId,
              relateMailId: that.categoreIofoClone.id,
              relateMailAddr: that.categoreIofoClone.email,
              categoryName: that.$refs[formName].model.categoryName,
              rulesType: that.$refs[formName].model.rulesType,
              rules: that.$refs[formName].model.list
            }
            saveAndUpdateMailCategory(that.$store, newData).then((res) => {
              if (res.success) {
                that.categoryId = ''
                that.categoryIndex = -1
                this.refreshCategory()
                that.categoryShow = false
              }
            })
          } else {
            return false
          }
        })
      }
    },
    computed: {
      mailCategory () {
        return this.$store.state.config.channelConfig.channelMail.mailCategory.list
      },
      categoreIofoClone () {
        return this.categoreInfo
      }
    },
    beforeMount () {
      if (this.categoreIofoClone.id) {
        this.refreshCategory()
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .title
    font-size 14px
    .el-icon-arrow-left
      color $c-main
      border 1px solid $c-main
      border-radius 50%
      cursor pointer
      margin 0 5px 0 15px
  .right
    float right
    display inline-block
  .disabled
    border-radius 4px
    border 1px solid #b1b1b1
  .enabled
    border-radius 4px
    color $c-main
    border 1px solid #fff
  .active
    color $c-main
    border 1px solid $c-main
  .content
    padding 10px 15px
    font-size 14px
  .mail_category_box
    border-bottom 1px solid #ccc
    padding 10px 0
    font-size 12px
    min-height 28px
    span
      cursor pointer
      padding 4px 10px
      margin 0 8px
      display inline-block
      max-width 90px
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
  .category_add_li
    width 400px
    .category_li_input
      width calc(100% - 100px)
  .domain_btn
    cursor pointer
  .condition_li
    box-sizing border-box
    padding-right 30px
  .condition_li_item
    width 100%
  .conditions_li_text
    display inline-block
  .category_form_li
    margin-bottom 20px
  .mail_category_add
    font-size 12px
    padding-top 10px
  .mail_category_all
    display inline-block
    max-width calc(100vw - 100px)
  .color_red.enabled,.el-icon-minus
    color $c-pink
  .color_red.active
    border-color red
  .btn_box
    button
      float right
      margin-right 10px
  .el-icon-plus
    color $c-main
</style>
